<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传统手工艺</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /* 改变面包屑的分隔符 */
        .breadcrumb-item + .breadcrumb-item::before{
            content: ">";
        }
        .back-top{
            width:80px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 120px;
            right: 30px;
        }
    </style>
</head>
<body  id="grad">
    <div class="container">
        <!-- header:页眉 -->
        <header id="header">
            <div class="row">
                <!-- 布局 -->
                <div class=" container d-flex "  > 
                    <!-- 非物质文化遗产的logo（响应式） -->
                    <div class="col-2 embed-responsive ">
                        <img src="images/logo2.jpg" alt="" class="rounded-circle img-fluid" style="width: 160px; height: 160px;">
                    </div>
                    <div class="col-10 " style="height: 50px;">
                        <!-- 非物质文化遗产文字 -->
                        <h1 class="logo " id="fy-logo">非物质文化遗产</h1>
                        <div >
                            <!-- 功能栏：分类的导航链接（胶囊导航） -->
                            <ul class="nav nav-pills">
                                <!-- 非物质文化遗产的全部和分类 -->
                                <li class="nav-item"><a class="nav-link" href="second-page.html" style="color:white;font-family:'KaiTi'; font-size:20px;">查看全部</a></li>
                                <li class="nav-item"><a class="nav-link" href="byys.html" style="color:white;font-family:'KaiTi';font-size:20px;">表演艺术</a></li>
                                <li class="nav-item"><a class="nav-link" href="ctsgy.html" style="color:white;font-family:'KaiTi';font-size:20px ;">传统手工艺</a></li>
                                <li class="nav-item"><a class="nav-link" href="ktct.html" style="color:white;font-family:'KaiTi';font-size:20px ;">口头传统</a></li>
                                <li class="nav-item"><a class="nav-link" href="ysyjq.html" style="color:white;font-family:'KaiTi';font-size:20px ;">仪式与节庆</a></li>
                                <li class="nav-item"><a class="nav-link" href="zrjyyzz.html" style="color:white;font-family:'KaiTi';font-size:20px ;">自然界与宇宙中</a></li>
                            </ul>
                        </div>
                            
                        </div>     
                    </div>
            </div>
        </header>
        <p></p>
        <nav>
         <ol class="breadcrumb">
             <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="index.html">首页</a></li>
             <li class="breadcrumb-item"style="font-family:'KaiTi';"> <a href="ctsgy.html">传统手工艺</a></li>
         </ol>
     </nav>
          <!-- 创建一个表格统计此界面的所有非遗物的名称 -->
         <div class="table-responsive">
              <!-- 创建一个响应式表格 -->
             <table class=" table" border="">
                <tr style="text-align: center; font-family:'KaiTi'; font-size:xx-large;color: white;">
                    <td colspan="16"><b>传统手工艺类</b></td>
                </tr>
                <!-- 表格第一行的总括 -->
               <tr style="font-family:'KaiTi';  font-size:x-large;color: white;">
                   <!-- 分类 -->
                   <td>中国剪纸</td>
                   <td>中国雕版印刷技艺</td>
                   <td>中国篆刻</td>
                   <td>中国书法</td>
                   <td>中国传统木结构建筑营造技艺</td>
                   <td>南京云锦织造技艺</td>
                   <td>中国水密隔舱福船制造技艺</td>
                   <td>中国活字印刷术</td>
                   <td>中国木拱桥传统营造技艺</td>
                   <td>中国传统桑蚕丝织技艺</td>
                   <td>宣纸传统制作技艺</td>
                   <td>热贡艺术</td>
                   <td>龙泉青瓷传统烧制技艺</td>
                   <td>黎族传统纺染织绣技艺</td>
               </tr>
             </table>
          </div>
          <p></p>
           <!-- 创建一个网格系统把类别的图片和链接排列 -->
          <div class="row">
              <!-- 每行一个图片占三格共十二格 -->
            <div class="col-md-3">
                <!-- modal 创建一个模态框 ，rounded-circle把按钮变成圆形 -->
                <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                style="width: 260px; height: 260px;background-image: url('images/jianzhi.jpg');background-size: cover;"> </button>
                <div class="modal fade" id="mymodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- modal body -->
                            <div class="modal-body">
                                <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                           </div>
                            <!-- modal footer -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                           </div>
                        </div>
                    </div>
                </div>
                <p></p>
                <a href="third-page\jianzhi2.html"><p style="text-indent: 90px;font-family:'KaiTi';font-size: large;">中国剪纸</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/diaobanyingshu.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 55px;font-family:'KaiTi';font-size: large;">中国雕版印刷技艺</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/zhuanke.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 90px;font-family:'KaiTi';font-size: large;">中国篆刻</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/shufa.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 90px;font-family:'KaiTi';font-size: large;">中国书法</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                style="width: 260px; height: 260px;background-image: url('images/mujiegou.jpg');background-size: cover;"> </button>
                <div class="modal fade" id="mymodal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- modal body -->
                            <div class="modal-body">
                                <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                           </div>
                            <!-- modal footer -->
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                           </div>
                        </div>
                    </div>
                </div>
                <p></p>
                <a href="index.html"><p style="text-indent: 35px;font-family:'KaiTi';font-size: large;">中国木结构建筑营造技艺</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/nanjing.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 60px;font-family:'KaiTi';font-size: large;">南京云锦织造技艺</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/shuimigecang.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 30px;font-family:'KaiTi';font-size: large;">中国水密隔舱福船制造技艺</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/huoziyingshua.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 70px;font-family:'KaiTi';font-size: large;">中国活字印刷术</p></a>
            </div>
            <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/mugongqiao.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 35px;font-family:'KaiTi';font-size: large;">中国木拱桥传统营造技艺</p></a>
           </div>
           <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/sangcan.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 40px;font-family:'KaiTi';font-size: large;">中国传统桑蚕丝织技艺</p></a>
           </div>
           <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/xuanzhi.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 60px;font-family:'KaiTi';font-size: large;">宣纸传统制作技艺</p></a>
           </div>
           <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/regong.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 96px;font-family:'KaiTi';font-size: large;">热贡艺术</p></a>
           </div>
           <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/longquan.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 35px;font-family:'KaiTi';font-size: large;">龙泉青瓷传统烧制技艺</p></a>
           </div>
           <div class="col-md-3">
                 <button type="button" data-toggle="modal" data-target="#mymodal" class="rounded-circle img-fluid"
                 style="width: 260px; height: 260px;background-image: url('images/lizufangranzhixiu.jpg');background-size: cover;"> </button>
                 <div class="modal fade" id="mymodal">
                     <div class="modal-dialog">
                         <div class="modal-content">
                             <!-- modal body -->
                             <div class="modal-body">
                                 <h5 style="font-family:'KaiTi';">我只是一张图片，想深入了解此物请点击图片以下的文字链接</h5>
                            </div>
                             <!-- modal footer -->
                             <div class="modal-footer">
                                 <button type="button" class="btn btn-danger" data-dismiss="modal img-fluid">ok</button>
                            </div>
                         </div>
                     </div>
                 </div>
                 <p></p>
                 <a href="index.html"><p style="text-indent: 40px;font-family:'KaiTi';font-size: large;">黎族传统纺染织绣技艺</p></a>
           </div>
       </div>   
       <div class="back-top">
        <a href="#header">
            <img src="images/top.gif" alt="" style="width: 60px; height: 80px;">
        </a>
    </div>
       <br><br><br>
       <hr>
       <footer id="footer" class="container " style="color: white; height: 60px;border-top: 1px solid #dddddd;width: 100%;background-color: rgb(179, 9, 9);">
        <div class="row p-1">
            <div class="col text-right">
                <div>
                    法律条款 隐私保护 联系我们 常见问题
                </div>
            </div>
            
        </div>
        <div class="row p-1">
            <div class="col text-center">
                <div>
                    版权所有@NIIT
                </div>
            </div>
        </div>
    </footer>
    </div>
</body>
</html>